<template>
  <div class="user-info-container" @click="showDropdown = false">
    <div class="user-info-wrapper">
      <div 
        class="user-info" 
        @mouseover="showDropdown = true"
        @mouseleave="showDropdown = false"
      >
        <div class="welcome-message">
          <div class="welcome-text">Welcome</div>
          <div class="user-name">{{ user }}</div>
        </div>        
        <div class="avatar-container">
          <img src="@/assets/user/image.png" alt="User avatar" class="user-avatar">
          <i class="dropdown-icon" :class="{ 'rotate': showDropdown }">▼</i>
        </div>
        
        <!-- 下拉菜单 -->
        <transition name="dropdown">
          <div class="dropdown-menu" v-show="showDropdown">
            <div class="dropdown-item" @click="goToProfile">
              <i class="icon">👤</i> Personal Information
            </div>
            <div class="dropdown-item" @click="goBuy">
              <i class="icon">🛒</i> Buy Things
            </div>
            <div class="dropdown-item" @click="goToOrders">
              <i class="icon">📦</i> My Orders
            </div>
            <div class="dropdown-item logout" @click="logout">
              <i class="icon">🚪</i> Logout
            </div>
            
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/store';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

export default {
  name: 'UserInfo',
  setup() {
    const router = useRouter();
    const showDropdown = ref(false);
    const user = store.state.user.username;

    const goToProfile = () => {
      router.push('/userProfile');
    };

    const goToOrders = () => {
      router.push('/userOrders');
    };

    const goBuy = () => {
      router.push('/userView');
    };

    const logout = () => {
      store.dispatch('user/clearUsername');
      alert('Logout successful');
      router.push('/userLogin');
    };

    return {
      user,
      showDropdown,
      goToProfile,
      goToOrders,
      goBuy,
      logout
    };
  }
};
</script>

<style scoped>
.user-info-container {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 40px;
  background: transparent;
}

.user-info-wrapper {
  position: relative;
  margin-right: 100px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.user-info:hover {
  background: rgba(255, 255, 255, 0.2);
}

.welcome-message {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.welcome-text {
  font-size: 12px;
  color: #41443a;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.user-name {
  font-size: 16px;
  font-weight: 600;
  color: #3b2d2d;
}

.avatar-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.dropdown-icon {
  font-size: 10px;
  color: #b9b0b0;
  transition: transform 0.3s ease;
  margin-left: 4px;
}

.dropdown-icon.rotate {
  transform: rotate(180deg);
}

/* 下拉菜单样式 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  width: 200px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 1000;
  margin-top: 10px;
}

.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.3s ease;
}

.dropdown-enter-from,
.dropdown-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #333;
  transition: all 0.2s ease;
  font-size: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.dropdown-item:hover {
  background: #f8f9fa;
  padding-left: 20px;
}

.dropdown-item .icon {
  font-size: 16px;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.logout {
  color: #ff4d4f;
  font-weight: 500;
}

.logout:hover {
  background: rgba(255, 77, 79, 0.1);
}
</style>